<template>
  <a-card :bordered="false">
    <a-col :span="9">
      <a-tabs
        :defaultActiveKey="0"
        tabPosition="left"
        @tabClick="tableChange"
      >
        <a-tab-pane v-for="(item, index) in tableList" :tab="item.label" :key="index"></a-tab-pane>
      </a-tabs>
    </a-col>
    <a-col :span="15">
      <a-form-model
        :model="formData"
        :rules="rules"
        ref="myForm"
        :style="{width:'100%'}"
        layout="vertical"
        v-bind="{}"
        :colon="true"
        labelAlign="right">
        <a-row style="height: 100%">
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="项目地址" prop="projectPath" extra="" v-bind="{}">
                  <a-input
                    v-model="formData.projectPath"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="作者" prop="author" extra="" v-bind="{}">
                  <a-input
                    v-model="formData.author"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="包名" prop="packageName" extra="" v-bind="{}">
                  <a-input
                    v-model="formData.packageName"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="false"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-row :gutter="5">
              <a-col :span="8">
                <a-form-model-item label="表名" prop="tableName" extra="" v-bind="{}">
                  <a-input
                    v-model="formData.tableName"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="true"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="业务名" prop="bizName" extra="" v-bind="{}">
                  <a-input
                    v-model="formData.bizName"
                    placeholder=""
                    :allowClear="true"
                    size="default"
                    :disabled="true"></a-input>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="模板" prop="template" extra="" v-bind="{}">
              <a-checkbox-group v-model="formData.template" :disabled="false">
                <a-checkbox v-for="(opt,idx) in templateList" :key="idx" :value="opt.name">
                  {{ opt.comment }}
                </a-checkbox>
              </a-checkbox-group>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ span: 22, offset: 2 }">
              <a-button type="primary" @click="onSubmit"> 生成</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-col>
  </a-card>
</template>

<script>
import * as code from '@/api/code/code.js'

export default {
  name: 'CodeIndex',
  components: {},
  props: [],
  data () {
    return {
      tableList: [],
      templateList: [],
      formData: {
        projectPath: '',
        author: '',
        packageName: '',
        tableName: '',
        bizName: '',
        template: []
      },
      rules: {
        projectPath: [{
          required: true,
          message: '项目地址不能为空',
          trigger: 'blur'
        }],
        author: [{
          required: true,
          message: '作者不能为空',
          trigger: 'blur'
        }],
        packageName: [{
          required: true,
          message: '包名不能为空',
          trigger: 'blur'
        }],
        tableName: [{
          required: true,
          message: '表名不能为空',
          trigger: 'blur'
        }],
        bizName: [{
          required: true,
          message: '业务名不能为空',
          trigger: 'blur'
        }],
        template: [{
          required: true,
          message: '模块不能为空',
          trigger: 'change'
        }]
      }
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
    this.getTable()
    this.getTemplate()
    this.getGen()
  },
  methods: {
    tableChange (idx) {
      const item = this.tableList[idx]
      Object.assign(this.formData, {
        bizName: item.comment,
        tableName: item.name
      })
    },
    getTable () {
      code.getTable().then(res => {
        this.tableList = res || []
      })
    },
    getTemplate () {
      code.getTemplate().then(res => {
        this.templateList = res || []
      })
    },
    getGen () {
      code.getGen().then(res => {
        Object.assign(this.formData, res || {})
      })
    },
    onSubmit () {
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          console.log('error')
        } else {
          const param = JSON.parse(JSON.stringify(this.formData))
          const template = param.template
          delete param['template']
          template.forEach(item => {
            param[item] = true
          })
          code.generate(param).then(res => {
            this.$message.success('生成成功！')
          })
        }
      })
    },
    onReset () {
      this.$refs['myForm'].resetFields()
    }
  }
}

</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}

</style>
